<html>
<head>
	<title> Search Engines Settings </title> 
	<script type="text/javascript" src="options.js"></script> 
</head>
<body>
<center>
	<table border="5" height="60%" width="80%">
		<tr>
			<td width="300px">
				<iframe frameborder="0" id="elist" scrolling="auto" src="EngineList.html" width="298px" height="100%">
				</iframe>
			</td>
			<td valign="top">
				<p style="background:#e0e0e0">
					Choose your favorite Search Engines from the left list. Then drag and drop their icons to rearrange them into your favorite sequence. 
				</p>
				<p>
					If you uses a userContent.css file to specify default zoom level of Safari, please fill its zoom value in the following textbox. <a href="http://www.macosxhints.com/article.php?story=20091019093600680"> See more details. </a> 
				</p>
				<table border="0">
					<tr>
						<td valign="top">
							Zoom Level: 
						</td>
						<td>
							<input type="text" id="zoom" onchange="zoomChange(this.value)" value=""> 
						</td>
					</tr>
					<tr>
						<td valign="top">
							New tab position 
						</td>
						<td>
							<form name="openTab" action="">
								<select name="newTab" onchange="tabPosChange(this.value)"> 
									<option value="leftMost">
										Left Most in the Tab Bar 
									</option>
									<option value="rightMost">
										Right Most in the Tab Bar 
									</option>
									<option value="rightTab">
										Right at the current Tab 
									</option>
									<option value="leftTab">
										Left at the current Tab 
									</option>
								</select> 
							</form>
						</td>
					</tr>
					<tr>
						<td valign="top">
							Open new tab in 
						</td>
						<td>
							<form name="tabAction" action="">
								<select name="activeTab" onchange="activeTabChange(this.value)"> 
									<option value="background">
										Background 
									</option>
									<option value="foreground">
										Foreground 
									</option>
								</select> 
							</form>
						</td>
					</tr>
				</table>
				<p style="background:#e0e0e0">
					You can drag and drop the text on this page to test/preview your new settings. 
				</p>
				<p style="background:#e0e0e0">
					Don't forget to "Save" your new Settings. <font color="red"> Before </font> Save, you can roll back to your last saved settings by clicking "Reset" button. 
				</p>
				<button id="save" onclick="save_all()">
					<font color="red"> Save </font> 
				</button>
				<button id="reset" onclick="reset_all()">
					Reset 
				</button>
			</td>
		</tr>
	</table>
	<br>
	<div id="engineslist" style="width:100%; clear:both">
	</div>
</center>
<script type="text/javascript">
	zoom.value=zoomLevel;
    openTab.newTab.options[openTabOptions[tabPos]].selected="selected";
    tabAction.activeTab.options[activeTabOptions[activeTab]].selected="selected";
	var engineslist=document.getElementById("engineslist");
	engineslist.innerHTML='<img id="foobar" src="img/foobar.png" style="width:48px; height:48px; opacity=0" draggable=false ondragenter="foolast(this, event)" ondragover="return false;">';
</script> 
</body>
</html>
